<template>
  <div class="hInputWrap">
    <input type="text" @change="fnChange" @input="fnInput" v-model="value" :maxlength="maxlength" :minlength="minlength"/>
    <div v-if="showWordLimit">
      {{value.length}}个字
    </div>
  </div>
</template>

<script>
import {reactive, toRefs} from "vue";

export default {
  name: "hInput",
  props: {
    modelValue: {
      type: [String, Number],
      default: ''
    },
    maxlength: {
      type: Number,
      default: -1
    },
    minlength: {
      type: Number,
      default: -1
    },
    showWordLimit: {
      type: Boolean,
      default: true
    }
  },
  setup(props, context){
    console.log(props)

    const data = reactive({
      value: props.modelValue,
      length: 0
    })
    const fnChange = () => {
      console.log(data.value)

    }

    const fnInput = () => {
      context.emit("update:modelValue", data.value)
    }

    return {
      ...toRefs(data),
      fnChange,
      fnInput
    }
  }
}
</script>

<style scoped>

</style>